<template>
	<view>
		<swiper display-multiple-items="1" circular="true">
			<swiper-item v-for="(item,index) in sirenfm" :key="index">
				<view class="background" :style="{backgroundImage:'url('+item.album.picUrl+')'} ">
				</view>
				<!-- 头部 -->
				<view class="FM_head">
					<image src="../../../static/xiallajiantou.png" class="Fm_head_image" @click="FMback"></image>
					<text class="Fm_head_text">私人FM</text>
					<image class="Fm_head_image2" src="../../../static/gengduo1.png"></image>
				</view>
				<!-- 中心部分 -->
				<view class="FM_center">
					<image class="FM_center_image" mode="" :src="item.album.picUrl"></image>
					<text class="FM_center_text1">{{item.name}}</text>
					<text class="FM_center_text2" v-for="(i,index) in item.artists.slice(0,1)">{{i.name}}</text>
				</view>
		
				<!-- 进度条 -->
				<!-- <view class="uni-padding-wrap uni-common-mt">
				            <view class="progress-box">
				                <progress percent="20" show-info stroke-width="3" />
				            </view>
				</view> -->
				<!-- 功能模块 -->
				</swiper-item>
				</swiper>
				
			
	


	</view>
</template>

<script>
	import progressline from './progress-line.vue'
	export default {
		data() {
			return {
				sirenfm: [],
			}
		},
		mounted() {
			this.getfm()
		},
		methods: {
			getfm() {
				uni.request({
						url: 'http://localhost:3000/login/cellphone?phone=15171189697&password=htl240@0815',
						success: (res) => {
							console.log('登录成功')
						}
					}),
					uni.request({
						url: 'http://localhost:3000/personal_fm',
						method: 'POST',
						success: (res) => {
							this.sirenfm = res.data.data
						}
					})
			},
			FMback() {
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 1000,
					delta: 1,

				})
			}
		}

	}
</script>

<style lang="scss">
	.background {
		background-repeat: no-repeat;
		background-size: 80% 80%;
		position: absolute;
		background-position: center;
		filter: blur(80px);
		z-index: -1;
		transform: scale(2);
		background-color: #000000;
	}

	.FM_head {
		width: 750rpx;
		height: 100rpx;
		position: relative;
	}

	.Fm_head_image {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 18rpx;
		left: 20rpx;
	}

	.Fm_head_image2 {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 15rpx;
		right: 20rpx;
		color: #fff;
	}

	.Fm_head_text {
		width: 200rpx;
		height: 50rpx;
		position: absolute;
		top: 30rpx;
		left: 270rpx;
		text-align: center;
		font-size: 35rpx;
		color: #fff;
	}

	//中心部分
	uni-swiper {
		width: 750rpx;
		height: 1500rpx;
	}

	uni-view {
		width: 750rpx;
		height: 1500rpx;
	}

	.FM_center {
		width: 650rpx;
		margin: 100rpx auto;
		height: 750rpx;
		border-radius: 10px;
	}

	.FM_center_image {
		height: 600rpx;
		width: 645rpx;
		border-radius: 10px;
	}

	.FM_center_text1 {
		display: block;
		width: 600rpx;
		height: 40rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 10rpx;
		// color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		letter-spacing: 1px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
		color: #fff;
	}

	.FM_center_text2 {
		display: block;
		width: 200rpx;
		height: 50rpx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
		font-size: 10rpx;
		opacity: 0.4;
	}
	
	
	// 进度条
.progress_box{
	width:400rpx;
	height:30rpx;
	// position: absolute;
	// top:0;
	// left:0;
	border:1px solid red;
}
.FM_progress{
	width:400rpx;
}
</style>
